<template>
	<view class="container">
		<block v-if="type == 'tag_str'">
			<view class="f-wrap">
				<view class="title">已选择标签</view>
				<view @click="onTagDel(index)" v-for="(item, index) in value" :key="index" class="tag">{{ item }}</view>
			</view>
			<view class="f-wrap">
				<view class="title">自定义标签</view>
				<view class="tag-add" @click="showAddTag = true">
					<u-icon color="#999" size="25" name="plus"></u-icon>
				</view>
				<!-- 添加弹窗 -->
				<u-popup :show="showAddTag" mode="center" width="80%">
					<view class="popup-wrap">
						<view class="title">自定义标签</view>
						<input v-model="addValue" class="tag-input" type="text" placeholder="最长4个字" />
					</view>
					<view class="btn-wrap">
						<view @click="onCancel" class="btn-cancel">取消</view>
						<view @click="onConfirm" class="btn-confirm">保存</view>
					</view>
				</u-popup>
			</view>
			<view class="f-wrap">
				<view class="title">标签</view>
				<view @click="onTagAdd(item)" v-for="(item, index) in tagList" :key="index" class="tag">{{ item }}
				</view>
			</view>
		</block>
		<block v-else><input v-model="value" class="input" type="text" /></block>
		<view style="margin-top: 50rpx;">
			<q-button @click="submit">保存</q-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showAddTag: false,
				type: '',
				value: '',
				tagList: ['圈子达人', '旅行', '热爱生活', '摩羯座', '摄影', '读书', '运动', '看电影', '听歌'],
				addValue: ''
			};
		},
		onLoad(options) {
			this.type = options.type;
			if (options.value) {
				this.value = JSON.parse(options.value);
				
				if(options.value == "tag_str"){
					this.value = [];
				}
			}
		},
		methods: {
			onCancel() {
				this.showAddTag = false;
				this.addValue = '';
			},
			onConfirm() {
				if (!this.addValue) {
					this.$u.toast('自定义标签不能为空');
					return;
				}

				if (this.addValue.length > 4) {
					this.$u.toast('不能超过4个字');
					return;
				}

				let str = this.value.toString();
				if (str.includes(this.addValue)) {
					this.$u.toast('已存在相同标签');
					return;
				}

				this.value.push(this.addValue);
				this.showAddTag = false;
				this.addValue = '';
			},
			submit() {
				uni.showLoading({
					mask: true,
					title: '正在保存'
				});
				let obj = {};
				let type = this.type;

				obj[type] = this.value;

				this.$H.post('content/user/userInfoEdit', obj).then(res => {
					if (res.code == 200) {
					console.log(res.data)
					this.$store.commit('login', res.data);
					//返回上一个页面的方法
					uni.navigateBack();
					}
					uni.hideLoading();
			});
			},
			onTagDel(index) {
				this.value.splice(index, 1);
			},
			onTagAdd(name) {
				let str = this.value.toString();
				if (str.includes(name)) {
					this.$u.toast('已存在相同标签');
					return;
				}

				this.value.push(name);
			}
		}
	};
</script>

<style lang="scss">
	page {
		background-color: #f5f5f5;
	}

	.popup-wrap {
		padding: 50rpx 30rpx;

		.tag-input {
			background-color: #f5f5f5;
			margin-bottom: 30rpx;
			padding: 20rpx;
		}

		.title {
			text-align: center;
			font-weight: bold;
			margin-bottom: 20rpx;
		}
	}


	.btn-wrap {
		display: flex;

		.btn-cancel {
			width: 50%;
			padding: 20rpx 0;
			text-align: center;
			background-color: #f5f5f5;
		}

		.btn-confirm {
			background-color: $themes-color;
			width: 50%;
			padding: 20rpx 0;
			text-align: center;
		}
	}

	.input {
		border-bottom: 1px solid #e2e2e2;
		padding: 10rpx;
	}

	.tag-add {
		padding: 20rpx;
		background-color: #f5f5f5;
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	/* 标签 */

	.tag {
		padding: 10rpx 20rpx;
		border-radius: 20rpx;
		font-size: 24rpx;
		display: inline-block;
		margin-right: 20rpx;
		margin-bottom: 20rpx;
		background-color: #ffebe5;
	}

	.tag:nth-child(2n) {
		background-color: #ecf9f2;
	}

	.tag:nth-child(3n) {
		background-color: #fff7e5;
	}

	.tag:nth-child(5n) {
		background-color: #b3e0ff;
	}
</style>
